<template>
	<view class="test_result">
		<div class="score">
			<div class="inner">
				<div class="numbox">
					<div class="num">{{total}}</div>
					<div class="unit">分</div>
				</div>
				<div class="res">{{tipsItem.description}}</div>
			</div>
		</div>
		
		<view class="info_wrap">
			<view class="card">
				<!-- <div class="title">维度得分</div> -->
				<div class="title">得分</div>
				<div class="linebox">
					<div class="item" v-for="(item,index) in scoreList" :key='index'>
						<div class="lab">{{item.typeName}} ({{item.total}})</div>
						<div class="progbox">
							<div class="line"><div class="line2" :style='{width:(item.total / item.itemAllScore)*100 +"%"}'></div></div>
							<div class="f">{{item.itemAllScore}}分</div>
						</div>
					</div>
				</div>
			</view>
			<view class="card">
				<view class="title">评价分析</view>
				<view class="desc" v-if="type==1">{{descWord}}</view>
				<view class="desc" v-if="type==0">{{tipsItem.content}}</view>
			</view>
			<view class="card2">
				<view class="title">尊敬的参与者：</view>
				<view class="desc">感谢您参与我们的测试。根据您的回答，我们为您生成了以上测试结果。测试结果的目的是为了给出一个大致的评估，并帮助您获得关于自身状况的初步了解。但它并不能代替专业医疗或诊断的结果。如果您对自己的状况有任何担忧，请咨询专业人士以获取详细评估和建议。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { rsultInfo,getTypeRsultInfo} from '@/network/api.js'
	export default {
		data() {
			return {
				total:0,
				scoreList:[
					// { typeName:"语言能力",num:20},
					// { typeName:"记忆力",num:20},
					// { typeName:"判断能力",num:20},
					// { typeName:"计算能力",num:20 },
					// { typeName:"定向力",num:20 },
				],
				tipsList:[],
				tipsItem:{content:'-',description:'-'},
				descWord:'-',
				groups:{},
				type:0,
			}
		},
		onLoad: function(option) {
		  // #ifdef H5
		  document.title = ' '
		  // #endif
		  const eventChannel = this.getOpenerEventChannel();
		  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		  eventChannel.on('acceptDataFromOpenerPage', (data)=> {
			this.total = data.list.reduce((total,i)=>{return total+i.total },0)
			this.scoreList = data.list
			console.log('this.scoreList:',this.scoreList)
		  })
		  this.type = option.type == 0?0:1
		  this.getTips(option.id)
		  
		},
		methods: {
			async getTips(id){
				const res = await rsultInfo({id})
				this.tipsList = res.data || []
				this.tipsItem = this.tipsList.find(item=>{
						return this.total>=item.startScore && this.total<=item.endScore
				}) || {content:'不在此区间',description:'-'}
				
				this.getDesc(id)
			},
			async getDesc(id){
				const res = await getTypeRsultInfo({id})
				const groups = this.getGroup(res.data,'typeDes')
				console.log('groups:',groups,this.scoreList)
				this.groups = groups
				this.scoreList.forEach(item=>{
					if(Array.isArray(groups[item.typeName])){
					item.tips =	groups[item.typeName].find(i=>{
							return item.okList>=i.startScore && item.okList<=i.endScore
						}) || {content:'不在此区间',description:''}
					}
					item.description = item.tips?.description || '表现未知'
					console.log('item.description:',item.description)
					//总体上，您的语言复述能力，记忆力表现较差，判断能力，计算能力，定向力表现较好，存在中度认知风险。本次评测结果仅供风险参考，您的学历，注意力是否集中等因素亦有可能会对本次结果产生产生影响
				})
				const descRes = this.getGroup(this.scoreList,'description')
				console.log('descRes:',descRes)
				let descStr = '总体上，您的'
				const keys = Object.keys(descRes)
				const values = Object.values(descRes).map(i=>{
					return i.reduce((total,i)=>{
						total.push(i.typeName)
						return total
					},[]).join('、')
				})
				// console.log('keys:',keys,values)
				descStr += values.reduce((tol,i,index)=>{
				  return tol+=i+keys[index] + (values.length-1 == index?'':'，')
				},'')
				descStr+= '，存在'+this.tipsItem.description +'。'
				descStr+= '本次评测结果仅供风险参考，您的学历、注意力是否集中等因素亦有可能会对本次结果产生产生影响。'
				console.log('descStr:',descStr)
				this.descWord = descStr
			},
			getGroup(data,key){
				 let groups={};
				    data.forEach(c=>{
				        let value=c[key];
				        groups[value]=groups[value]||[];
				        groups[value].push(c);
				    });
				    return groups;
			}
		}
	}
</script>
<style>
	page{
		background-color: #B5E4FF;
	}
</style>
<style lang="less" scoped>

.linebox{
	margin-top: 20rpx;
	padding: 0 10rpx;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70rpx;
		.lab{
			font-size: 28rpx;
			font-weight: 400;
			color: #1F1F1F;
		}
		.progbox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.line{
				width: 300rpx;
				height: 12rpx;
				background: #DBDBDB;
				border-radius: 6rpx;
				.line2{
					height: 100%;
					background-color: #4E6FD9;
					border-radius: 6rpx;
				}
			}
			.f{
				font-size: 28rpx;
				font-weight: bold;
				color: #4E6FD9;
				margin-left: 10rpx;
				width: 100rpx;
			}
		}
	}
}
.info_wrap{
	padding: 0 25rpx;
	.card{
		padding: 35rpx;
		background: rgba(255,255,255,0.75);
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #363636;
		}
		.desc{
			padding: 0 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #565656;
			line-height: 50rpx;
			margin-top: 30rpx;
			text-align: justify;
		}
	}
	.card2{
		margin: 0 20rpx;
		padding-bottom: 100rpx;
		.title{
			font-size: 32rpx;
			font-weight: 400;
			color: #363636;
			margin-top: 60rpx;
			margin-bottom: 10rpx;
		}
		.desc{
			font-size: 24rpx;
			font-weight: 400;
			color: #565656;
			line-height: 50rpx;
		}
	}
	
}
.score{
	width: 400rpx;
	height: 400rpx;
	border: 2px dashed #FFFFFF;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 10rpx;
	margin: 40rpx auto;
	margin-bottom: 58rpx;
	.inner{
		background-color: rgba(255,255,255,0.5);
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.numbox{		
			margin-bottom: 10rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			.num{
				font-size: 140rpx;
			    line-height: 140rpx;
				font-weight: 400;
				color: #4E6FD9;
				display: inline-block;
				vertical-align: -6rpx;
				// margin-top: 20rpx;
			}
			.unit{
				font-size: 40rpx;
				line-height: 40rpx;
				font-weight: 400;
				color: #363636;
				display: inline-block;
			}
		}
		.res{
			font-size: 32rpx;
			font-weight: 400;
			color: #363636;
		}
	}
}
</style>
